<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="robots" content="nofollow" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>双辉旅程网后台管理</title>
        <!-- Bootstrap core CSS -->
        <link href="/css/bootstrap.css" rel="stylesheet">
        <!-- Add custom CSS here -->
        <link href="/css/sh-admin.css" rel="stylesheet">
        <!-- JavaScript -->
        <script src="/js/jquery-1.10.2.js"></script>
        <script src="/js/bootstrap.js"></script>
    </head>
    <body style="background:#315169;">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="logo"><img src="/img/logo.png" /></div>
                    <!-- 登录框start -->
                    <div class="login">
                        <h3 class="text-center">分公司管理员登录</h3><br>
                        <form class="form-horizontal" role="form" action="/manager/loginsuccess" method="post">
                            <div class="form-group">
                              <label for="firstname" class="col-sm-2 control-label">账号<span id="phoneerror" style="color: red;"></span></label>
                              <div class="col-sm-10">
                                 <input type="text" class="form-control" id="firstname" name="account" 
                                    placeholder="请输入管理员账号">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastname" class="col-sm-2 control-label">密码<span id="passworderror" style="color: red;"></span></label>
                              <div class="col-sm-10">
                                 <input type="password" class="form-control" id="lastname" name="password" 
                                    placeholder="请正确输入密码">
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-xs-2 control-label">验证码<span id="codeerror" style="color: red;"></span></label>
                              <div class="col-xs-6">
                                <input type="text" class="form-control" name="code" placeholder="请输入验证码" />
                              </div>
                              <div class="col-xs-4">
                              <img  id="captcha_img" style="cursor: pointer;" onclick="this.src='{:captcha_src()}?d='+Math.random();" alt="点击更换" title="点击更换" src="{:captcha_src()}" class="m">
                              </div>
                            </div>

                            <div class="form-group">
                              <center><input type="submit" value="登陆" class="btn btn-primary loginbtn"></center>
                            </div>
                            <div class="loginbtm">
                            <a href="/manager/losspassword">忘记密码?</a>
                            </div>
                        </form>
                    </div>
                    <!-- 登录框end -->
                    <div class="footer navbar-fixed-bottom text-center"><p>双辉盛业旅游开发股份有限公司 版权所有</p></div>
                </div>
            </div>
        </div>
    </body>
</html>
<script src="/front/js/jquery.js"></script>
<script type="text/javascript">
      $(function(){
        //账号验证
        $("input[name='account']").blur(function(){
          var account = $('input[name="account"]').val();
          //不能为空
          if(!$.trim(account)) {
          $("input[name='account']").css({border: "1px solid red"});
          $("#firstname").attr("placeholder","请输入账号即手机号");
          return false;
          }
          //手机号格式是否满足
          if((/^1[3|4|5|7|8]\d{9}$/.test(account)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(account))){
          $("input[name='account']").css({border: "1px solid green"});
          $("#phoneerror").html("");
          }else {
          $("input[name='account']").css({border: "1px solid red"});
          $("#phoneerror").html("有误");
          return false;
          }
        })
        //密码验证
        $("input[name='password']").blur(function(){
          var password = $('input[name="password"]').val();
          //不能为空
          if(!$.trim(password)) {
          $("input[name='password']").css({border: "1px solid red"});
          $("#lastname").attr("placeholder","请输入密码");
          return false;
          }else{
            $("input[name='password']").css({border: "1px solid green"});
          $("#passworderror").html("");
          }
          
        })
        //验证码验证
        $('input[name="code"]').keyup(function(){
          var code = $('input[name="code"]').val().length;
          if (code>3) {
            var code = $('input[name="code"]').val();
          //不能为空
          if(!$.trim(code)) {
          $("input[name='code']").css({border: "1px solid red"});
          $("#codeerror").html("");
          return false;
          }else {
            $.get('/manager/checkcode?imgCode='+$("input[name='code']").val(),function(data) {
            $("input[name='code']").css({border: "1px solid green"});
            $("#codeerror").html("");
            if (data===0) {
              $("input[name='code']").css({border: "1px solid red"});
              $("#codeerror").html("");
            }
          });
            }
          }
      })  
        
      })
</script>